<template>
  <div class="khbq_low">
    <div class="khbq_low_1">
      <div class="khbq_low_1_2" style="margin-right: 390px">
        <my-search width="400" ph="客户标签名称"></my-search>
      </div>
      <div class="khbq_low_1_3" style="margin-right: 10px">
        <my-button :color="true">添加标签</my-button>
      </div>
      <div class="khbq_low_1_3" style="margin-right: 10px">
        <my-button color="none">批量删除</my-button>
      </div>

    </div>
    <div style="width:1000px">
      <div class="khbq_low_2">
        <base-table
          :mydata="khbqData"
          :mytitle="khbqTitle"
          checkbox="true"
          type="gdfl"
        ></base-table>
      </div>
      <div class="pages">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>      
    </div>

  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
export default {
  components: {
    MySearch,
    MyButton,
    BaseTable,
  },
  data() {
    return {
     khbqData: [
        {
          id: "001",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "002",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "003",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "004",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "005",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "006",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "007",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "008",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "009",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
        {
          id: "010",
          tag: "标签名",
          ages: "5",
          time: "2019/09/12 10:99",
        },
      ],
         khbqTitle: [
        {
          name: "ID",
          prop: "id",
          width: 150,
        },
        {
          name: "标签预览",
          prop: "tag",
          width: 200,
        },
        {
          name: "使用次数",
          prop: "ages",
          width: 220,
        },
        {
          name: "创建时间",
          prop: "time",
          width: 200,
        },
      ],
    };
  },
};
</script>

<style>
.khbq_low {
  width: 1040px;
  height: 760px;
  background-color: #ffffff;
  padding-top: 2px;
}
.khbq_low_1 {
  display: flex;
  margin-top: 20px;
  margin-left: 12px;
}
.khbq_low_2 {
  width: 101%;
  margin-top: 20px;
  margin-left: 10px;
}
</style>